<template>
  <div class="loginpage" :style="{ 'background-image': `url(${configData.bgimg})` }">
    <div class="login">

      <div @click="handleChangelang" style="position: absolute;top: 1%;right: 25%; cursor: pointer;z-index: 999;">
        <img v-if="lang == 'zh'" src="../../static/imgs/zh.png"
          style="width: 50px;height: 22px;cursor: pointer;margin-top: 8px;" alt="">
        <img v-if="lang == 'en'" src="../../static/imgs/en.png"
          style="width: 50px;height: 22px;cursor: pointer;margin-top: 8px;" alt="">
      </div>

      <div class="contentBox">
        <div class="title" :style="{ color: `${configData.bgColor}` }">{{ lang == 'zh' ? textData[8].value :
          textData[9].value }} </div>
        <!-- <span style="font-size:15px;">V2.0</span> -->


        <div class="loginlogo">
          <img :src="configData.logoimg" alt="">
        </div>

        <div class="login-box">
          <div class="login-box-text" style="font-size: 16px;">{{ $t('assemble.密码登录') }}</div>
          <div class="login-content">
            <el-form :model="loginForm" :rules="loginrules" ref="loginForm" label-width="100px" class="demo-ruleForm">
              <el-form-item prop="email">
                <div class="email-box">
                  <div class="email-text">
                    <p class="shu"></p>
                    <p>{{ $t('assemble.邮箱地址') }}</p>
                  </div>
                  <el-input v-model="loginForm.email" :placeholder="$t('assemble.请输入')"></el-input>
                </div>
              </el-form-item>

              <el-form-item prop="password">
                <div class="email-box">
                  <div class="email-text">
                    <p class="shu"></p>
                    <p>{{ $t('assemble.密码') }}</p>
                  </div>
                  <el-input v-model="loginForm.password" :placeholder="$t('assemble.请输入')" show-password></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>

          <div class="login-btn" @click="login">{{ $t('assemble.登录') }}</div>
          <div class="password-register">
            <p @click="findPassword">{{ $t('assemble.忘记密码') }}</p>
            <p @click="register">{{ $t('assemble.注册账号') }}</p>
          </div>
          <div class="kong"></div>


          <div v-if="$i18n.locale == 'en'" class="agreement" style="padding:0;">
            <el-checkbox class="check" v-model="checked"></el-checkbox>
            <div class="agreement-text">
              <span>Have read and agree</span>
              <span class="red" style="cursor: pointer;" @click="gotoyinsi('0')">'Service Agreement'</span>
              <span>And</span>
              <span class="red" style="cursor: pointer;" @click="gotoyinsi('1')"> 'Privacy Policy'</span>
            </div>
          </div>


          <div v-if="$i18n.locale == 'zh'" class="agreement">
            <el-checkbox class="check" v-model="checked"></el-checkbox>
            <div class="agreement-text">
              已阅读并同意
              <p class="red" style="cursor: pointer;" @click="gotoyinsi('0')">《服务协议》</p> 和 <p class="red"
                style="cursor: pointer;" @click="gotoyinsi('1')"> 《隐私协议》</p>
            </div>
          </div>

        </div>


        <div class="beian" :style="{ color: `${configData.fontColor}` }">
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
            :style="{ color: `${configData.fontColor}` }">{{ lang == 'zh' ? textData[4].value : textData[5].value }}</a>
          <div style="width: 100%; text-align: center;">{{ lang == 'zh' ? textData[6].value : textData[7].value }}</div>
        </div>
      </div>



      <!-- <div class="title">欢迎来到网易标签订购系统 <span style="font-size:15px;">V2.0</span> </div>
      <div class="loginlogo">
        <img src="../../static/imgs/loginlogo.png" alt="">
      </div>
      <div class="login-box">
        <div class="login-box-text" style="font-size: 20px;">密码登录</div>
        <div class="login-content">
          <el-form :model="loginForm" :rules="loginrules" ref="loginForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="email">
              <div class="email-box">
                <div class="email-text">
                  <p class="shu"></p>
                  <p>邮箱地址</p>
                </div>
                <el-input v-model="loginForm.email" placeholder="请输入"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="email-box">
                <div class="email-text">
                  <p class="shu"></p>
                  <p>密码</p>
                </div>
                <el-input v-model="loginForm.password" placeholder="请输入" show-password></el-input>
              </div>
            </el-form-item>

          </el-form>
        </div>

        <div class="login-btn" @click="login">登录</div>
        <div class="password-register">
          <p @click="findPassword">忘记密码</p>
          <p @click="register">注册账号</p>
        </div>
        <div class="kong"></div>
        <div class="agreement">
          <el-checkbox class="check" v-model="checked"></el-checkbox>
          <div class="agreement-text">
            已阅读并同意
            <p class="red" style="cursor: pointer;" @click="gotoyinsi('0')">《服务协议》</p> 和 <p class="red" style="cursor: pointer;" @click="gotoyinsi('1')"> 《隐私协议》</p>
          </div>
        </div>
      </div>

      <div class="beian">
        <a href="https://beian.miit.gov.cn/#/Integrated/index"  target="_blank">ICP备案：粤B2-20090191-18</a>
      <div style="width: 100%; text-align: center;">建议您使用Chrome、IE10及以上版本、Edge浏览器浏览本网站</div>
        
      </div>
         -->

    </div>


  </div>
</template>


<script>
import { emaillogin, config } from '../../utils/api'
export default {
  data() {
    return {
      loginForm: {
        email: '',
        password: '',

      },
      loginrules: {
        email: [
          { required: true, message: this.$t('assemble.请输入邮箱地址'), trigger: 'blur' },
        ],

        password: [
          { required: true, message: this.$t('assemble.请输入密码'), trigger: 'blur' },
        ],
      },
      // email: '',
      // password: '',
      checked: false,
      lang: 'zh',
      configData: {},
      textData: {},
    }
  },
  mounted() {
    this.$i18n.locale = 'zh'
    this.lang = 'zh'
    localStorage.setItem('langtype', 'zh')
    this.configData = JSON.parse(localStorage.getItem('config'))
    // console.log("444444", this.$i18n.locale)
    this.handleconfig()
  },
  methods: {
    async handleconfig() {
      let res = await config()
      this.textData = res.data
      console.log("textData[5].value ", this.textData[8].value)
    },

    handleChangelang() {
      console.log("2222")
      if (this.$i18n.locale == 'en') {
        this.$i18n.locale = 'zh'
        this.lang = 'zh'

      } else {
        this.$i18n.locale = 'en'
        this.lang = 'en'

      }
      localStorage.setItem("langtype", this.$i18n.locale)
      // window.location.reload();
    },
    async login() {
      let data = {
        email: this.loginForm.email,
        password: this.loginForm.password
      }
      if (!this.checked) {
        this.$message({
          message: this.$t('assemble.请同意服务协议和隐私协议'),
          type: 'warning'
        });
      } else {
        let res = await emaillogin(data)
        console.log("登录", res)
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: this.$t('assemble.登录成功'),
            type: 'success'
          });
          let userData = {
            chinesename: res.data.chinesename,
            companyemail: res.data.companyemail,
            phone: res.data.phone,
          }
          localStorage.setItem('userData', JSON.stringify(userData))
          localStorage.setItem("email", this.loginForm.email)
          localStorage.setItem('token', res.data.userinfo.token)
          localStorage.setItem('userinfo', JSON.stringify(res.data.userinfo))
          this.$router.push({ path: '/home' })

        } else {
          let langType = localStorage.getItem('langtype')
          let tip = res.msg.split(',')
          let msg = langType == 'zh' ? tip[0] : tip[1]
          this.$message({
            message: msg,
            type: 'warning'
          });
        }
      }
    },
    gotoyinsi(val) {
      this.$router.push({ path: '/login/yinsi', query: { type: val } })

    },
    findPassword() {
      console.log("找回密码")
      this.$router.push({ path: '/login/findPassword' })
    },
    register() {
      this.$router.push({ path: '/login/register' })
    }
  }
}
</script> 

<style scoped lang="scss">
.loginpage {
  width: 100%;
  height: 100vh;
  // background: #F8F8F8;
  border-radius: 0px 0px 0px 0px;
  // background-image: url(../../static/imgs/systembg.png);
  background-size: 100% 100%;

  .login {
    width: 1200px;
    height: 100vh;
    // background: #F8F8F8;
    // padding-top: 110px;
    box-sizing: border-box;

    .contentBox {
      width: 700px;
      height: 900px;
      // background-color: pink;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      // justify-content: space-between;
      flex-direction: column;

      // align-items: center;
      .title {
        width: 100%;
        height: 21px;
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        // color: #E00000;
        line-height: 28px;
        font-weight: bolder;
        text-align: center;
      }

      .loginlogo {
        width: 200px;
        height: 43px;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 20px;
      }

    }

    // ===============================





    .login-box {
      width: 700px;
      height: 600px;
      background: #FFFFFF;
      box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
      border-radius: 50px 50px 50px 50px;
      opacity: 1;
      // padding: 70px 175px 0;
      padding: 50px 120px;
      box-sizing: border-box;
      margin: 0 auto;
      margin-top: 60px;


      .login-box-text {
        // width: 72px;
        height: 25px;
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 21px;
      }

      .login-content {
        // margin-top: 15px;

        .email-box {
          margin-top: 20px;

          .email-text {

            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 21px;
            display: flex;
            align-items: center;

            .shu {
              width: 4px;
              height: 14px;
              background: #E00000;
              border-radius: 2px 2px 2px 2px;
              opacity: 1;
              margin-right: 6px;
            }
          }


        }

      }

      .login-btn {
        width: 300px;
        height: 45px;
        background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
        border-radius: 22px 22px 22px 22px;
        opacity: 1;
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 45px;
        text-align: center;
        margin: 50px auto 0;
        cursor: pointer;
      }

      .password-register {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #B1B1B1;
        line-height: 19px;
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        p {
          cursor: pointer;
        }
      }

      // .kong {
      //   width: 100%;
      //   height: 30px;
      // }

      .agreement {
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #B1B1B1;
        line-height: 22px;
        display: flex;
        padding-left: 50px;
        box-sizing: border-box;
        margin-top: 40px;

        .agreement-text {
          display: flex;
          align-items: center;
          margin-left: 10px;

          .red {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #E00000;
            line-height: 19px;
          }
        }

        .check {
          border-radius: 10px;
        }

      }

    }

    .beian {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 90%;
      // color: white;

      // margin: 0 auto;
      a {
        text-decoration: none;
        color: white;

      }

    }

  }

}


::v-deep .el-form-item__content {
  margin-left: 0px !important;
  line-height: normal !important;
  font-size: 18px !important;
}

::v-deep .el-form-item {
  margin-bottom: 0px !important;

}

::v-deep .el-input__inner {
  font-size: 14px;
}
</style>